<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#0199FE" :active-item-style="activeStyle" :show-bar="showBar" class="titleMsg" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false"
				 swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<!-- 订单信息 -->
						<view class="line" v-for="(res,index) in dataList">
							<!-- 订单 -->
							<view class="top">
								<view class="line_msg">
									<view class="left">
										订单编号：
									</view>
									<view class="right">
										{{res.OrderNumber}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										订单状态：
									</view>
									<view class="right">
										{{res.status}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										订单金额：
									</view>
									<view class="right">
										{{res.OrderAmount}}元
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										优惠金额：
									</view>
									<view class="right">
										{{res.PreferentialAmount}}元
									</view>
								</view>
							</view>
							<!-- 付款配送 -->
							<view class="center">
								<view class="line_msg">
									<view class="left">
										付款方式：
									</view>
									<view class="right">
										{{res.paymentMethod}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										配送方式：
									</view>
									<view class="right">
										{{res.DistributionMode}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										所属仓库：
									</view>
									<view class="right">
										{{res.Warehouse}}号仓库
									</view>
								</view>
							</view>
							<!-- 下单支付 -->
							<view class="btm">
								<view class="line_msg">
									<view class="left">
										下单时间：
									</view>
									<view class="right">
										{{res.OrderTime}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										支付时间：
									</view>
									<view class="right">
										{{res.PaymentTime}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										发货时间：
									</view>
									<view class="right">
										{{res.DeliveryTime}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										确认到货时间：
									</view>
									<view class="right">
										{{res.ConfirmTime}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<!-- 买家信息 -->
						<view class="line" v-for="(res,index) in dataList">
							<view class="top">
								<view class="line_msg">
									<view class="left">
										买家用户名：
									</view>
									<view class="right">
										{{res.BuyerUsername}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										收货人姓名：
									</view>
									<view class="right">
										{{res.ConsigneeName}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										收货人电话：
									</view>
									<view class="right">
										{{res.Consignee}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										收货人地址：
									</view>
									<view class="right_map">
										{{res.AddressConsignee}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										虚拟收货地址：
									</view>
									<view class="right_map">
										{{res.VirtualAddress}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										是否院内：
									</view>
									<view class="right">
										{{res.Hospital}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										所在医院：
									</view>
									<view class="right">
										{{res.Ishospital}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										配送方式：
									</view>
									<view class="right">
										{{res.DistributionMode}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<!-- 商品信息 -->
						<view class="shop_information" v-for="(res,index) in dataList">
							<view class="shop">
								<!-- 图 -->
								<view class="shop_banner">
									<view class="shop_img">
										<image :src="res.img" mode=""></image>
									</view>

									<view class="shop_msg">
										<!-- 介绍 -->
										<view class="">
											{{res.shopMsg}}
										</view>
										<view class="shop_moeny">
											￥{{res.shopMoey}}
										</view>
									</view>

									<view class="shop_num">
										x{{res.shopNum}}
									</view>
								</view>
								<!-- 优惠 -->
								<view class="line">
									<view class="line_msg">
										<view class="left">
											优惠券
										</view>
										<view class="right">
											{{res.coupon}}元
										</view>
									</view>
									<view class="line_msg">
										<view class="left">
											配送费
										</view>
										<view class="right">
											{{res.Delivery}}元
										</view>
									</view>
								</view>
								<!-- 价格 -->
								<view class="price">
									<view class="shop_span">
										共1件商品，实付款<view style="color: #F24951;">
											￥{{res.totalPrice}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<!-- 发货信息 -->
						<view class="line"  v-for="(res,index) in dataList">
							<view class="top">
								<view class="line_msg">
									<view class="left">
										配送方式：
									</view>
									<view class="right">
										{{res.DistributionMode}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										订单状态：
									</view>
									<view class="right">
										{{res.OrderStatus}}
									</view>
								</view>
								<view class="line_msg">
									<view class="left">
										联系电话：
									</view>
									<view class="right">
										{{res.contactNumber}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [
					[],
					[],
					[],
					[],
					[]
				],
				dataList: [{
					OrderNumber: '535224676',
					status: '待付款',
					OrderAmount: '59.9',
					PreferentialAmount: '15',
					paymentMethod: '微信支付',
					DistributionMode: '快递',
					Warehouse: '1',
					OrderTime: '2020.07.22 12:59:32',
					PaymentTime: '2020.07.22 12:59:32',
					DeliveryTime: '2020.07.22 12:59:32',
					ConfirmTime: '2020.07.22 12:59:32',
					BuyerUsername: '用户名称',
					ConsigneeName: '名称',
					Consignee: '12345678911',
					AddressConsignee: '四川省 成都市 成华区 青龙场街5号北回 归线8栋1203号',
					VirtualAddress: '四川省 成都市 成华区 青龙场街5号北回 归线8栋1203号',
					Hospital: '是',
					Ishospital: '医院名称',
					DistributionMode: '快递',
					img: '../../static/image/common/banner2.png',
					shopMsg: '新生婴儿儿衣服套盒刚出生宝宝满月礼物初生用品纯棉',
					shopMoey: '89.90',
					shopNum: '1',
					coupon: '5.00',
					Delivery: '6.00',
					totalPrice: '60.90',
					DistributionMode: '院内配送',
					OrderStatus: '张三',
					contactNumber: '13334343987'
				}],
				list: [{
						name: '订单信息'
					},
					{
						name: '买家信息'
					},
					{
						name: '商品信息'
					},
					{
						name: '发货信息'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				showBar:false,
				activeStyle:{background:"#ffffff"},
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
			};
		},
		onLoad() {
			this.getOrderList(0);
			this.getOrderList(1);
			this.getOrderList(3);
		},
		computed: {},
		methods: {
			reachBottom() {
				// 此tab为空数据
				if (this.current != 2) {
					this.loadStatus.splice(this.current, 1, "loading")
					setTimeout(() => {
						this.getOrderList(this.current);
					}, 1200);
				}
			},
			// 页面数据
			getOrderList(idx) {
				for (let i = 0; i < 5; i++) {
					let index = this.$u.random(0, this.dataList.length - 1);
					let data = JSON.parse(JSON.stringify(this.dataList[index]));
					data.id = this.$u.guid();
					this.orderList[idx].push(data);
				}
				this.loadStatus.splice(this.current, 1, "loadmore")
			},
			// 总价
			totalPrice(item) {
				let price = 0;
				item.map(val => {
					price += parseFloat(val.price);
				});
				return price.toFixed(2);
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.getOrderList(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.line {
		.top {
			margin-top: 36rpx;
		}

		.center {
			margin: 20rpx 0;
		}

		.line_msg {
			width: 750rpx;
			min-height: 96rpx;
			background: rgba(255, 255, 255, 1);
			margin: 2rpx auto;
			display: flex;
			justify-content: space-between;
			line-height: 96rpx;

			.left {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				margin-left: 33rpx;
			}

			.right {
				width: 455rpx;
				text-align: right;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(23, 25, 25, 1);
				margin-right: 33rpx;
			}

			.right_map {
				width: 455rpx;
				line-height: 60rpx;
			}
		}
	}
	.shop_information {
		.shop {
			.shop_banner {
				margin-top: 20rpx;
				padding: 50rpx 19rpx 60rpx 32rpx;
				display: flex;
				justify-content: space-between;
				background: rgba(255, 255, 255, 1);

				.shop_img {
					image {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.shop_msg {
					width: 411rpx;
					height: 56rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);

					.shop_moeny {
						font-size: 24rpx;
						margin-top: 72rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: rgba(51, 51, 51, 1)
					}
				}

				.shop_num {
					line-height: 160rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(153, 153, 153, 1);
				}
			}

			.price {
				width: 750rpx;
				height: 96rpx;
				background: rgba(255, 255, 255, 1);
				line-height: 96rpx;
				text-align: right;

				.shop_span {
					margin-right: 31rpx;
					display: flex;
					justify-content: flex-end;
				}
			}
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
